import axios from "../../axios";
import { useEffect, useState } from "react";
import { Select, Input, Row, Col,Table,Button,message } from "antd"

const { Search } = Input;
function Articlemanger() {
    const [selectList, setSelectList] = useState([])
    const getSelection = async () => { //获取文章分类 列表
        let { list } = await axios.get("/category/list", {
            params: {
                status: "",
                type: 3,
                temp: new Date().getTime()
            }
        })
        setSelectList(list)
    }

    // 下拉
    const [selectValue, setSelectvalue] = useState("")
    const handleChange = (value) => {
        // console.log(`${value}`);
        setSelectvalue(value)
    };
    // 搜索
    const [keywords, setkeywords] = useState("")
    const onSearch = (value) => {
        setkeywords(value)
    }
    // 下拉

    const [list, setList] = useState([])
    const [page, setPage] = useState(1)
    const [limit, setLimit] = useState(20)
    const [total,settotal]=useState(0)
    const getList = async () => {
       
        let { list,total } = await axios.get("/article/list", {
            params: {
                keywords,
                cid: selectValue,
                page,
                limit,
                temp: new Date().getTime(),
            }
        })
        setList(list)
        settotal(total)
    }

    // 下面是表格分页事件

    const pageOnChange=(page, pageSize)=>{
        setPage(page)
        setLimit(pageSize)
    }
    // 下面是表格
      
      const columns = [
        {
          title: 'Id',
          dataIndex: 'id',
          key: 'id',
        },
        {
          title: '图片',
          dataIndex: 'imageInput',
          key: 'imageInput',
          render:(_,row)=><img className="img" src={row.imageInput} alt="" />
        },
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title',
        },
        {
          title: '文章分类',
          dataIndex: 'cid',
          key: 'cid',
          render:(_,row)=>{

            return (
                <i>
                 {
                     selectList.map(item=>{
                        // console.log(item);
                        
                        if(item.id==row.cid){
                          return (item.name)
                             
                        }
                    })
                  }
                 
                </i>
            )
          }
        },
        {
          title: '作者',
          dataIndex: 'author',
          key: 'author',
        },
        {
          title: '文章简介',
          dataIndex: 'synopsis',
          key: 'synopsis',
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          key: 'updateTime',
        },
        {
          title: '操作',
          dataIndex: 'X',
          key: 'X',
          render:()=><Button onClick={noToken} size="small">编辑</Button>
        },
     
      ];
    // 增加和编辑没有权限
    const noToken=()=>{
        
        message.open({
            type: 'error',
            content: '没有权限',
          });
    }
    useEffect(() => {
        getSelection()

    }, [])
    useEffect(() => {
        getList()
    }, [selectValue, keywords, page, limit])
    return (
        <section>
            <Row gutter={20}>
                <Col span={5}>
                    <Select
                        style={{ width: 200 }}
                        fieldNames={{ label: "name", value: "id" }}
                        onChange={handleChange}
                        options={selectList}
                    />
                </Col>
                <Col span={10}>
                    <Search
                        placeholder="请输入关键词"
                        allowClear
                        enterButton="搜索"

                        onSearch={onSearch}
                    />
                </Col>
            </Row>

            <Button type="primary" onClick={noToken}>添加文章</Button>
            <Table rowKey="id" dataSource={list} columns={columns}
             pagination={{
                pageSize:limit,
                total,
                showQuickJumper:true,
                showSizeChanger:true,
                showTotal:(total)=>`共${total}条数据`,
                onChange:pageOnChange,
                pageSizeOptions:[20,40,60,80,100]
             }}
            />

        </section>
    );
}

export default Articlemanger;